<template>
  <div>
    <el-menu class="el-menu-vertical-demo"
             active-text-color="#4489F6"
             :unique-opened="false"
             :default-active="activeMenu">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-s-data"></i>
          <span>案件信息统计</span>
        </template>
        <el-menu-item-group>
          <router-link to="/statistic_number">
            <el-menu-item index="/statistic_number">新增案件数量统计</el-menu-item>
          </router-link>
        </el-menu-item-group>
        <el-menu-item-group>
          <router-link to="/statistic_map">
            <el-menu-item index="/statistic_map">新增案件来源统计</el-menu-item>
          </router-link>
        </el-menu-item-group>
        <el-menu-item-group>
          <router-link to="/statistic_people">
            <el-menu-item index="/statistic_people">一审法官来源统计</el-menu-item>
          </router-link>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-share"></i>
          <span>全流程信息统计</span>
        </template>
        <el-menu-item-group>
          <router-link to="/pendCase">
            <el-menu-item index="/pendCase">未结案件全流程信息统计</el-menu-item>
          </router-link>
        </el-menu-item-group>
        <el-menu-item-group>
          <router-link to="/personProcessAnalysis">
            <el-menu-item index="/personProcessAnalysis">人员全流程信息统计</el-menu-item>
          </router-link>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-s-flag"></i>
          <span>案件风险数据</span>
        </template>
<!--        <el-menu-item-group>-->
<!--          <router-link to="/list1">-->
<!--            <el-menu-item index="/list1">案件风险详情</el-menu-item>-->
<!--          </router-link>-->
<!--        </el-menu-item-group>-->
        <el-menu-item-group>
          <router-link to="/caseRiskIndex">
            <el-menu-item index="/caseRiskIndex">案件风险详情</el-menu-item>
          </router-link>
        </el-menu-item-group>
        <el-menu-item-group>
          <router-link to="/statisticCopy">
            <el-menu-item index="/statisticCopy">风险数据报告</el-menu-item>
          </router-link>
        </el-menu-item-group>
      </el-submenu>
      <router-link to="/list4">
        <el-menu-item index="/list4">
          <i class="el-icon-user-solid"></i>
          <span slot="title">人员风险数据</span>
        </el-menu-item>
      </router-link>
      <router-link to="/userShowIndex">
        <el-menu-item index="/userShowIndex">
          <i class="el-icon-s-custom"></i>
          <span slot="title">用户中心</span>
        </el-menu-item>
      </router-link>
    </el-menu>
  </div>
</template>
<script>

export default {
  data() {
    return {
      childItem: ['2'],
      activeIndex: '/index1',
      indexMenu: '1-1',
      activeMenu: '/index1',
    }
  },
  created() {
    this.setActiveMenu();
  },
  watch: {
    $route(to) {
      this.setActiveMenu();
    },
  },
  mounted() {
    this.currentPath()
  },
  methods: {
    setActiveMenu() {
      this.activeMenu = this.$route.path; // 根据当前路由设置选中的菜单项
    },
    currentPath() {
      let url = this.$route.path.split('/').pop()
      switch (url) {
        case 'list1':
          this.indexMenu = '2';
          break;
        case 'list2':
          this.indexMenu = '3';
          break;
        case 'list3':
          this.indexMenu = '4';
          break;
        case 'list4':
          this.indexMenu = '5';
          break;
      }
    },
    alertSuccess(msg) {
      this.$message({
        message: msg,
        type: 'success'
      });
    },
    alertError(msg) {
      this.$message({
        message: msg,
        type: 'error'
      });
      ``
    }
  }
};
</script>
<style scoped>

.el-menu {
  height: 100%;
}

.el-menu-item {
  border-bottom: 1px solid #ececec;
}

a {
  text-decoration: none;
}

.el-menu {
  border-right: none;
}


</style>